Colors
All available colors are defined as bg- and text- classes with either the relevant theme color name or the shade value. There are half shades at the beginning and end of each color range (50 and 950).
Theme Colors
Theme colors are used to create a consistent visual experience across the application. They are used to convey meaning and provide feedback to the user.
.bg-primary
.text-primary
--bs-primary
.bg-secondary
.text-secondary
--bs-secondary
.bg-success
.text-success
--bs-success
.bg-warning
.text-warning
--bs-warning
.bg-danger
.text-danger
--bs-danger
.bg-info
.text-info
--bs-info
.bg-light
.text-light
--bs-light
.bg-dark
.text-dark
--bs-dark
Colors
All colors are available in 15 shades as background, text classes, and CSS variables. The color shades are defined as numbers from 50 to 950. The higher the number, the darker the shade. In dark mode this is inverted.
Default shades
Blue
600
Indigo
500
Purple
500
Pink
500
Red
500
Orange
400
Yellow
300
Green
500
Teal
400
Cyan
500
Shades
Background classes are named bg-{color}-{shade} and text classes are named text-{color}-{shade}. CSS variables are named --bs-{color}-{shade}.
reds
25
50
75
100
200
300
400
500
600
700
800
900
925
950
975
oranges
25
50
75
100
200
300
400
500
600
700
800
900
925
950
975
yellows
25
50
75
100
200
300
400
500
600
700
800
900
925
950
975
greens
25
50
75
100
200
300
400
500
600
700
800
900
925
950
975
blues
25
50
75
100
200
300
400
500
600
700
800
900
925
950
975
indigos
25
50
75
100
200
300
400
500
600
700
800
900
925
950
975
purples
25
50
75
100
200
300
400
500
600
700
800
900
925
950
975
pinks
25
50
75
100
200
300
400
500
600
700
800
900
925
950
975
cyans
25
50
75
100
200
300
400
500
600
700
800
900
925
950
975
teals
25
50
75
100
200
300
400
500
600
700
800
900
925
950
975
grays
25
50
75
100
200
300
400
500
600
700
800
900
925
950
975